<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
    <title>修改密码</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f7fc;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .password-container {
            position: relative;
            width: 100%;
            max-width: 600px;
            height:600px;
            background-color: #fff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            box-sizing: border-box; /* 确保 padding 不影响总宽度 */
        }

        h2 {
            font-size: 24px;
            margin-top:40px;
            margin-bottom: 30px;
            color: #333;
            text-align: center;
            font-weight: bold;
        }

        .input-group {
            margin-bottom: 20px;
            display: flex;
            flex-direction: column;
        }

        .input-group label {
            font-size: 14px;
            color: #555;
            margin-bottom: 5px;
            display: block;
        }

        .input-group input {
            padding: 12px 15px;
            font-size: 14px;
            border: 1px solid #ddd;
            border-radius: 5px;
            width: 100%; /* 确保输入框全宽 */
            box-sizing: border-box; /* 确保 padding 不影响宽度 */
            background-color: #f9f9f9;
            transition: background-color 0.3s ease, border-color 0.3s ease;
        }

        .input-group input:focus {
            background-color: #fff;
            border-color: #80bdff;
            outline: none;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.25);
        }

        .submit-button {
            width: 100%; /* 确保按钮与输入框宽度一致 */
            padding: 12px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            box-sizing: border-box; /* 确保 padding 不影响宽度 */
        }

        .submit-button:hover {
            background-color: #0056b3;
        }

        #errorMessage {
            margin-top: 20px;
            font-size: 14px;
            color: red;
            text-align: center;
        }
        /*返回按钮*/
        .bx{
          background-color: hsl(0, 0%, 100%);
          font-size: large;
          color: #0b0b0b;
          border: 1px solid #ccc;
          border-radius: 4px;
          padding: 10px 20px;
          margin-left: 10px;
          top: 20px;
          left: 20px;
          position: absolute;
        }

        .bx:hover {
          background-color: grey;
        }

        @media (max-width: 768px) {
            .password-container {
                padding: 20px;
            }
        }
    </style>
</head>
<body>

<div class="password-container">
    <div id="backButton">
        <a href="{{ url_for('center') }}">
            <button class="bx bx-left-arrow icon" > 返回上一级 </button>
        </a>
    </div>
    <h2>修改密码</h2>

    <div class="input-group">
        <label for="oldPassword">输入旧密码：</label>
        <input type="password" id="oldPassword" placeholder="请输入旧密码">
    </div>

    <div class="input-group">
        <label for="newPassword">输入新密码：</label>
        <input type="password" id="newPassword" placeholder="请输入新密码">
    </div>

    <div class="input-group">
        <label for="confirmNewPassword">确认新密码：</label>
        <input type="password" id="confirmNewPassword" placeholder="请再次输入新密码">
    </div>

    <button class="submit-button" onclick="checkPasswords()">确认修改</button>

    <div id="errorMessage"></div>
</div>

<script>
    function checkPasswords() {
        const oldPassword = document.getElementById('oldPassword').value;
        const newPassword = document.getElementById('newPassword').value;
        const confirmNewPassword = document.getElementById('confirmNewPassword').value;
        const errorMessageElement = document.getElementById('errorMessage');

        // 校验输入是否为空
        if (!oldPassword || !newPassword || !confirmNewPassword) {
            errorMessageElement.textContent = '所有字段均为必填项。';
            return;
        }

        // 校验新密码是否一致
        if (newPassword !== confirmNewPassword) {
            errorMessageElement.textContent = '新密码两次输入不一致。';
            return;
        }

        // 使用 fetch 向后端发送密码修改请求
        fetch('/dashboard/center/changepass', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                oldPassword: oldPassword,
                newPassword: newPassword
            })
        })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    errorMessageElement.style.color = 'green';
                    errorMessageElement.textContent = '密码修改成功！';
                } else {
                    errorMessageElement.style.color = 'red';
                    errorMessageElement.textContent = data.message;
                }
            })
            .catch(error => {
                errorMessageElement.textContent = '发生错误，请稍后重试。';
            });
    }
</script>

</body>
</html>
